<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑个人资料</title>
    <meta name="description" content="软课程管理平台个人资料编辑页面">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0CB07B',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        light: '#FFFFFF',
                        'primary-dark': '#0E4ACC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .form-input {
                @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary transition-colors duration-200;
            }
            .btn {
                @apply flex items-center justify-center px-6 py-2 rounded-lg transition-colors duration-200;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary-dark;
            }
            .btn-secondary {
                @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
        }
        body {
            @apply min-h-screen bg-gray-50 font-sans;
            background-image: url('/images/background.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- 固定顶部导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-primary text-white shadow-sm z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-book-open text-white text-2xl"></i>
                <h1 class="text-xl font-bold text-white">软课程管理平台</h1>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="text-white hover:text-neutral-200 transition-colors duration-300">返回</a></li>
                </ul>
            </nav>
            <div class="flex items-center space-x-3">
                <div id="username-display" class="font-medium text-white"></div>
                <a href="#" class="text-white hover:text-neutral-200 transition-colors duration-300">
                    <i class="fa-solid fa-user-circle text-xl"></i>
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 pt-24 pb-8">
        <div class="max-w-2xl mx-auto">
            <!-- 标题卡片 -->
            <div class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-lg shadow-md p-6 mb-6">
                <h2 class="text-xl font-bold text-white mb-4 flex items-center">
                    <i class="fas fa-user-edit text-white mr-3"></i>
                    编辑个人资料
                </h2>
                <p class="text-white text-opacity-80">您可以在此修改您的个人信息</p>
            </div>
            
            
            <!-- 表单容器 -->
            <div class="bg-gradient-to-br from-blue-100 to-indigo-100 rounded-xl shadow-lg p-8">
                <div class="space-y-6">
                    <!-- 用户名 -->
                    <div class="form-group">
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <input type="text" id="username" class="form-input" placeholder="请输入用户名">
                    </div>
                    
                    <!-- 姓名 -->
                    <div class="form-group">
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                        <input type="text" id="name" class="form-input" placeholder="请输入真实姓名">
                    </div>
                    
                    <!-- 邮箱 -->
                    <div class="form-group">
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                        <input type="email" id="email" class="form-input bg-gray-100 text-gray-600" disabled>
                    </div>

                    <!-- 学工号 -->
                    <div class="form-group">
                        <label for="student_id" class="block text-sm font-medium text-gray-700 mb-1">学工号</label>
                        <input type="text" id="student_id" class="form-input bg-gray-100 text-gray-600" disabled>
                    </div>
                    
                    <!-- 身份 -->
                    <div class="form-group">
                        <label for="role" class="block text-sm font-medium text-gray-700 mb-1">身份</label>
                        <input type="text" id="role" class="form-input bg-gray-100 text-gray-600" disabled>
                    </div>
                    
                    <!-- 按钮组 -->
                    <div class="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-4 mt-8">
                        <button class="btn btn-primary" onclick="saveProfile()">
                            <i class="fa fa-save mr-2"></i>保存更改
                        </button>
                        <button class="btn btn-secondary" onclick="openChangePasswordModal()">
                            <i class="fa fa-key mr-2"></i>修改密码
                        </button>
                        <button class="btn btn-secondary" onclick="goBack()">
                            <i class="fa fa-arrow-left mr-2"></i>返回
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 修改密码模态框 -->
    <div id="changePasswordModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
        <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-dark">
                    <i class="fas fa-key text-primary mr-2"></i>
                    修改密码
                </h3>
                <button class="text-gray-500 hover:text-gray-700 text-xl" onclick="closeChangePasswordModal()">
                    &times;
                </button>
            </div>
            
            <div class="space-y-4">
                <div class="form-group">
                    <label for="oldPassword" class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
                    <input type="password" id="oldPassword" class="form-input" placeholder="请输入当前密码">
                </div>
                
                <div class="form-group">
                    <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                    <input type="password" id="newPassword" class="form-input" placeholder="请输入新密码">
                </div>
            </div>
            
            <div class="flex justify-end space-x-3 mt-6">
                <button class="btn btn-primary" onclick="changePassword()">
                    <i class="fa fa-check mr-2"></i>确认修改
                </button>
                <button class="btn btn-secondary" onclick="closeChangePasswordModal()">
                    <i class="fa fa-times mr-2"></i>取消
                </button>
            </div>
        </div>
    </div>

    <script src="js/edit-profile.js"></script>
</body>
</html>